<template>
  <ele-modal
    width="700px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    title="添加话题组"
    @update:visible="updateVisible"
  >
    <el-row type="flex" justify="space-between">
    <el-col class="el-width flex-column">
      <div class="key-border">
        <!--<div class="content-title flex-column">
          <div>话题</div>
          <div>(#话题1,#话题2)</div>
        </div>-->
        <el-input
          class="input-size"
          :rows="12"
          type="textarea"
          v-model="hashtag"
          clearable
        />
      </div>
    </el-col>
    </el-row>
    <div class="btn-class flex">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" @click="confirm()">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
    export default {
        name: "addTopic",

      data() {
        return {
          hashtagIndex:-1,//赋值索引下标
          hashtag:'',
          // 弹窗是否打开
          visible:false,
        };
      },
      methods: {
        async show(item,index){

          this.hashtagIndex=-1
          if(item){
this.hashtag=item;
this.hashtagIndex=index
          }
          this.visible=true
        },
        // 弹出框 visible
        updateVisible(value) {
          this.hashtag=''
          this.visible=value
        },
        //取消
        cancel(){
          this.updateVisible(false)
        },
        //确定
        confirm(){
          console.log('this.hashtag',this.hashtag)
          if(!this.hashtag){
            this.$message.error("请输入话题")
            return
          }
          this.$emit('topicClick', this.hashtag,this.hashtagIndex)
          this.cancel()
        },
      }
    }
</script>

<style scoped lang="less">

  .el-width{
    margin:0px 0 35px;
  .key-border{
    width: 100%;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
  .content-title{
    background: #FAFAFC;
    height: 59px;
  div:first-child{
    margin-bottom: 5px;
  }
  }
  .input-border{
    border: #11be59 2px solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 5px;
    z-index:99
  }
  .none-border{
    border:none
  }
  }
  }
</style>
